{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block nav %}
              <li class="active"><a href="#">Home</a></li>
              <li><a href="/list_book">My Books</a></li>
              <li><a href="/shared_book">Shered Books</a></li>
              <li><a href="/search_book">Search Books</a></li>
{% endblock %}

{% block content %}
      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>ようこそ <span class="bookshare-logo"><span class="book-logo">book</span><span class="share-logo">share</span></span><span class="label label-warning">beta</span>へ</h1>
        <h2>社内で本を共有しませんか？</h2>
        <p>あなたが持っている本の一覧を登録して、他の人に紹介してあげてください。<br/>
          あなたが探している本は、社内の他の人が持っているかも。</p>
        <p>
          <a class="btn btn-primary btn-large" href="/signup" title="最初にユーザ登録をしてください。">Sign up now &raquo;</a>
          <a class="btn btn-large" href="/list_book" title="あなたの本の一覧を作成してください。">List my books &raquo;</a>
          <a class="btn btn-large" href="/shared_book" title="社内の本の一覧が参照できます。">Share books &raquo;</a>
          <a class="btn btn-large" href="/search_book" title="他の人の持っている本を探してみましょう。">Search books &raquo;</a>
        </p>
        <div class="g-plusone" data-size="small"></div>
        <div class="alert alert-info">
          <a class="close" data-dismiss="alert">×</a>
          <h4 class="alert-heading">News</h4>
          <ul>
            <li>[2012.03.30] 検索エンジンを Amazon にしました。より多くの本が検索できるようになっています。<span class="label label-important">new</span></li>
            <li>[2012.03.01] 社内の本の一覧を参照できるようになりました。</li>
          </ul>
        </div>
      </div>

      <!-- Example row of columns -->
      <div class="row">
        <div class="span3">
          <h2><img src="/img/glyphicons_071_book.png" alt="book"/> 本の共有</h2>
          <img style="margin: 3px" class="pull-right" src="/img/bs.png" alt="bs-logo"/>
          <p>bookshare は、社内で本を共有するためのサービスです。
            自分の持っている本を登録して、他の人に紹介してあげてください。
            自分が読みたいと思っている本は、bookshare で検索してみてください。
            社内の他の人が貸してくれるかもしれません。</p>
        </div>
        <div class="span3">
          <h2><img src="/img/glyphicons_270_shield.png" alt="shield"/> 社内限定</h2>
          <p>bookshare の利用範囲は、実際に本のやりとりが可能な範囲
            （具体的には社内のみ）に限定しています。
            会社のメールアドレスを受信できる人のみサービスを利用できるようにしています。
            サービス自体は、インターネットから利用できますが、社外の人はログインできません。</p>
        </div>
        <div class="span3">
          <h2><img src="/img/glyphicons_163_iphone.png" alt="smartphone"/> スマートフォンでも</h2>
          <img class="pull-left" src="/img/qr.png" alt="QR Code"/>
          <p>bookshare は、スマートフォンにも対応しています。（ほとんど必要ないかもしれませんが）外出先からでも、本の検索ができます。</p>
        </div>
        <div class="span3">
          <h2><img src="/img/glyphicons_024_parents.png" alt="users"/> 人間系で</h2>
          <p>bookshare は、「本の橋渡し役」です。
            あなたの持っている本を紹介したり、他の人が持っている本を探すことはできますが、
            本の「貸し借り」等については、当人同士で直接連絡を取り合ってください。
            （bookshare では、本の詳細情報に表示される持ち主へメールを送信をすることはできます）
            離れた拠点間のやりとりも、なんとかうまいこと人間系で…。</p>
        </div>
        <div class="span3">
          <h2><img src="/img/glyphicons_244_conversation.png" alt="conversation"/> 本の貸し借り</h2>
          <p>本の貸し借りについては、当人同士でしっかりと交渉してください。
            bookshare は、本の「貸し借り」や「売買」で発生したトラブルについて、
            一切の責任はとれません。
            当たり前のことですが、借りた本は大切に読みましょう。</p>
        </div>
        <div class="span3">
          <h2><img src="/img/glyphicons_184_volume_up.png" alt="volume"/> 他の人にも</h2>
          <p>bookshare を他の人にも紹介してあげてください。
            参加してくれる人が集まれば集まるほど、bookshare は便利なサービスになっていくハズです。</p>
          <p><a class="btn btn-warning" href="mailto:?subject=bookshare&amp;body=https://hardwave-bookshare.appspot.com/"><i class="icon-envelope icon-white"></i> メールで紹介する</a></p>
        </div>
        <div class="span3">
          <h2><img src="/img/glyphicons_195_circle_info.png" alt="info"/> bookshare は</h2>
          <p>bookshare は、まだ beta バージョンです。テストにご協力ください。
            このサービスは、<a href="http://code.google.com/intl/en/appengine/" target="_blank">Google App Engine</a> 上で動いています。
            UI のデザインには、<a href="http://twitter.github.com/bootstrap/" target="_blank">Bootstrap</a> を使用しています。</p>
        </div>
      </div>

      <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      //  {lang: 'ja'}
      </script>
{% endblock %}
